import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:mi_mang_flutter/provider/user_provider.dart';
import 'package:mi_mang_flutter/res/styles.dart';
import 'package:mi_mang_flutter/utils/locale_util.dart';
import 'package:provider/provider.dart';

class NicknamePage extends StatefulWidget {
  NicknamePage({Key? key}) : super(key: key);

  @override
  _NicknamePageState createState() => _NicknamePageState();
}

class _NicknamePageState extends State<NicknamePage> {
  // 控制删除文本按钮是否显示
  bool _isShowDelete = true;

  TextEditingController _nicknameController = TextEditingController();
  final FocusNode _nicknameNodeText = FocusNode();

  @override
  void initState() {
    super.initState();
    UserProvider provider = UserProvider();
    _nicknameController.text = provider.user?.nickName ?? '';
    //监听输入改变
    _nicknameController.addListener(() {
      setState(() {
        _isShowDelete = _nicknameController.text.isEmpty;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(i18n(context).setNickname),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Consumer<UserProvider>(builder: (context, provider, _) {
        return SafeArea(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Localizations(
                        locale: const Locale("en", ""),
                        delegates: [
                          GlobalMaterialLocalizations.delegate,
                          GlobalWidgetsLocalizations.delegate,
                          GlobalCupertinoLocalizations.delegate,
                        ],
                        child: TextField(
                          focusNode: _nicknameNodeText,
                          maxLength: 30,
                          autofocus: true,
                          controller: _nicknameController,
                          textInputAction: TextInputAction.done,
                          keyboardType: TextInputType.text,
                          decoration: InputDecoration(
                            counterText: "",
                            suffixIcon: Visibility(
                              visible: !_isShowDelete,
                              child: InkWell(
                                highlightColor: Colors.transparent,
                                splashColor: Colors.transparent,
                                child: Icon(Icons.close),
                                onTap: () {
                                  _nicknameController.clear();
                                  _nicknameNodeText.requestFocus();
                                },
                              ),
                            ),
                            // border: InputBorder.none,
                            // focusedBorder: InputBorder.none,
                            // enabledBorder: InputBorder.none,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Gaps.vGap20,
                ElevatedButton.icon(
                  icon: Icon(Icons.done),
                  label: Text(i18n(context).updates),
                  onPressed: () {
                    provider.updateUserInfo(nickName: _nicknameController.text);
                    Navigator.maybePop(context);
                  },
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}
